<template>
  <div>
    <button @click="add">+</button>
    <h2>
        {{ $store.state.num }}
        {{num}}
    </h2>
    <button @click="reduce">-</button>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { mapState,mapMutations } from 'vuex'
export default {
  data () {
    return {
      msg: "nihao"
    }
  },
  methods: {
    add () {
      /* this.$store.commit('addNum', {
        p1: 2,
        p2: 3
      }) */
      this.addNum({p1:2,p2:10});
    },
    reduce () {
     /*  this.$store.commit('reduceNum') */
     this.reduceNum();
    },
    ...mapMutations(['addNum','reduceNum'])
  },
  mounted () {
    console.log(mapState(['num','num2']))
    /* 
    
    {
      num(){
        return this.$store.state.num
      },
      num2(){
        return this.$store.state.num2
      }
    }
    */
  },
  components: {
    CommonHead
  },
  computed: {
    ...mapState(['num','num2'])
  }
}
</script>

<style lang="scss" scoped>
h1{
  color:red;
}
</style>
